新しくリリースされたSketchプラグインを紹介します(2020.07版)
前回の記事から3ヶ月ほど経ったため、あらためプラグインを棚卸しました。前回から2020/6/30までに、Plugin Directoryへマージされたものから、「インストールしたプラグイン」「候補に上がったプラグイン」「今回チェックしたその他のプラグイン」の順でお届けします。
インストールしたプラグイン
今回はなしです。
候補に上がったプラグイン
Sketch MeaXure
https://github.com/qjebbs/sketch-meaxure
Sketch MeasureをForkしてJavaScript API版として再ビルドしたプラグイン。Tintなどの新しい機能にも対応しています(が、あまり使いどころがないかも)。
A Lion
https://github.com/KevinGutowski/A-Lion
整列(Align)や配置(Distribute)の基準となるレイヤーを選択して、整列・配置できるようになるプラグイン。オブジェクトを選択してプラグインを実行すると表示されるウィンドウで基準となるレイヤーを選択します。
このプラグインをインストールしておくと、選択しているレイヤーが2つの場合であれば、Controlキーを押しながらインスペクターの上にある整列・配置のアイコンをクリックすると、基準となるレイヤーが反転します。(右揃えをクリックすると、右側にあるレイヤーが左側にあるレイヤーの右端へ揃います)
今回チェックしたその他のプラグイン
Brandfetch
https://github.com/Brandfetch/Brandfetch-Sketch-Plugin
https://brandfetch.io/ から検索して、アセットをダウンロードできるプラグイン。APIを叩くためにアカウントが必要。
Rename Text Layers by Style
https://github.com/okaybueno/rename-text-layers-by-style
テキストスタイル名に応じて、接頭辞または接尾辞として追記、置換のいずれかでレイヤー名を書き換えてくれるプラグイン。
Fill-Updater
https://github.com/lizhengDesign/Sketch-FillUpdater
アートボードを選択してプラグインを実行すると、選択したアートボードと同名のシェイプやシンボルにパターン塗りを追加して、アートボードのスナップショットを適用します。同時に、シェイプやシンボルからオリジナルのアートボードへ、プロトタイプ用のリンクが繋がれます。
Sketch Foundation
https://github.com/13protons/sketch-foundation
メモやガイド用途のレイヤーなど、特定のキーワードが設定されたレイヤーの表示・非表示を切り替えるプラグイン。キーワードは独自に設定可能です。
DarkModeSystem
https://github.com/BDiogo/DarkMode-System
選択しているレイヤーの色をライトモードのカラーとしてレイヤースタイルを生成し、同時にダークモード用に色を調整しつつレイヤースタイルを生成するプラグイン。ライトモード・ダークモードの切り替えも、プラグインで一括切り替え可能です。
Sympli Handoff
Sympli上でハンドオフをするために、アップロードするプラグイン。ハンドオフでは、レイヤー構成の確認、オブジェクトの大きさや位置・間隔の計測、アセットの書き出し、カラー、フォントの情報を取得できます。
CODING Toolkit Sketch Plugin
https://github.com/Coding/coding-sketch-toolkit
おそらく説明で「アイコンを同期」といった単語が見られるため、ライブラリホスティングサービス向けのプラグイン。Dataにも追加されるが、中国市場向けのため、ほぼ未検証。
Switch Theme(Light/Dark Switch)
https://github.com/chaos-machine/switch-theme
LightモードとDarkモードを切り替えるプラグイン。アートボード内のオブジェクトを走査しながら、オブジェクトが属するライブラリ内にLight / Darkモード用のシンボルやスタイルがあれば切り替えてくれる感じです。単にライブラリ内のシンボルやスタイルの名前にある「Light」と「Dark」を置換しているようですが、、シンボルしか変わってくれなかった…あと、Runnerでインストールする場合は「Light/Dark Switch」で検索してください。
Above the Fold by Visualeyes
https://www.visualeyes.design/tools/above-the-fold/
いわゆる「ファーストビュー」がどこまでの範囲かを明示してくれるプラグイン。プラグイン提供元のサービスが持っているユーザーデータを元に、アートボードのサイズからOSやブラウザのツールバーなどを除いた、実際のビューポートに近い領域を算出して表示してくれるようです。
Isometry
https://github.com/maxkonovalov/Isometry
名前の通り、アイソメトリックなオブジェクトを生成できるプラグイン。シンボルにも適用自体はできますが、さすがに正しく変形はできないようです。
Copy-Updater
https://github.com/lizhengDesign/Sketch-CopyUpdater
SketchファイルとJSONファイルをリンクして、テキストレイヤーやテキストオーバーライドに含まれる特定にキーワードをJSONの値で置換して同期してくれるプラグイン。JSONからSketch・SketchからJSONと相互に同期可能で、Sketchでテキストを編集するのが面倒という場合は良いかもしれません。
Sync with Library
https://github.com/oodesign/sync-with-library
ライブラリと同じ名前のローカルシンボルやレイヤースタイル・テキストスタイルを探して、ライブラリかローカルかのどちらで置換できるプラグイン。Gumroadでライセンスキーの取得が必要で、金額は任意の値で値段を入力できます。Merge Duplicatesのサブセットアプリのようです(こっちは€25)。
Export Flat SVGs
https://github.com/KevinGutowski/ExportFlatSVGs
テキストレイヤーをアウトライン化し、SVGとして書き出ししてくれるプラグイン。選択したレイヤーを書き出せるような説明ですが、Make Exportableの設定がないと書き出しできませんでした。(ちなみにPNGで設定されていてもプラグインは動作します)
Color Copy Paste
スマートフォンなどのカメラと連動し、写っている画像内から色をピックアップするプラグイン。
Genus
https://github.com/keplerlab/genus
プロトタイプ用にHTML(とCSS)を書き出ししてくれるプラグイン。div
とspan
でマークアップされ、レイアウトはposition: absolute
で配置される感じでした。
Detach out of sync text styles
https://github.com/tijmenvangurp/detach-out-of-sync-text-styles
ライブラリのテキストスタイルを適用しかつそのスタイルを変更しているレイヤーをライブラリから分離してくれるプラグイン。プラグイン実行後、分離したいライブラリを選択すると、条件が揃っているテキストスタイルすべてを一発で分離できます。
slint
https://github.com/nusability/slint
デフォルト名のレイヤーや同期されていないスタイル・空のグループなど、Sketchファイルをさまざまな条件でチェックしてくれる、いわゆるLinterプラグイン。
同じような機能がSketch 68でAssistantsとして実装される予定です(執筆時点)。
Library inventory
https://github.com/tijmenvangurp/library-inventory
ファイル内で使われているライブラリシンボルの一覧を、CSVで書き出しできるプラグイン。
Colors to Code
https://github.com/Sugarcode-Team/colors-to-code-sketch-plugin-live
選択しているレイヤーの塗りから、CSSやSCSS・Reactなどのフォーマットのカラーコードを生成してくれるプラグイン。レイヤー名が変数名になります。
有料ウェブサービスicanicon.ioのプラグインですが、テストで使ってみたところ、#
が多いとかSCSS記法なのに;
がないとか、ちょっといただけない感じでした。
Icons to Code
https://github.com/Sugarcode-Team/icons-to-code-sketch-plugin-live
選択したオブジェクトを、SVGをはじめReactやVue・EPSなど、さまざまな形式で書き出してくれるプラグイン。「Colors to Code」と同じく、有料ウェブサービスicanicon.ioのプラグインです。
Xscape
小技系のプラグイン集。Sketchファイルをコピーしてバックアップを作成したり、Change logとしてドキュメントのメタ情報にコメントを追加したり、サイズやポジションのコピペができたりと、Automate Sketchとは少し違った内容です。
Perfect Type
https://github.com/rtrikha/perfect-type-plugin
プラグイン内に設定された値に合わせて、Line heightとText spacingを設定してくれるプラグイン。一応3種類のプリセットが準備されているのですが、プラグイン内のJavaScriptファイルを直接書き換えてねって感じなので、実質1種類です。
アンインストールしたプラグイン
Symbol Browser
RunnerにComponents Browserが実装(執筆時点でベータ版かつ有料機能)されたため、あえなくお役目御免に。
現在のインストール済みのプラグイン
たまにしか使わないものも含めて次の通りです。
- AEUX
- Arrange Artboards Hierarchically
- Automate Sketch
- Cluse
- Collapse All Artboards And Groups
- Contrast
- Craft
- Data from clipboard
- Find and Replace
- Light Switch
- Line-Height Fixer
- Lottie export
- Magic-Aligner
- PinIt
- Rename-It
- Resize Commands
- SVGO Compressor
- Sketch Image Compressor
- Sketch Measure
- SketchCleaner
- Switch Text Spacing
- Symbol Name Autocomplete
- Symbol Organizer
- SymbolNameSync
- Tin Drum
- Unsplash
- sketch-dev-tools
- Runner
では楽しいSketchライフを。